<template>
    <div class="map-view">
        <div id="choicemap"></div>
        <i class="el-icon-close map-close" @click="hiddenView"></i>
    </div>
</template>

<script type="text/javascript">
import { getMaxIndex } from '@/utils/index'

export default {
    name: 'map-view', // 地图详情
    components: {},
    computed: {},
    data() {
        return {}
    },
    props: {
        /**
         * title 内容
         * lat lng 经纬度
         */
        title: {
            type: String,
            default: ''
        },
        lat: {
            type: Number,
            default: 0
        },
        lng: {
            type: Number,
            default: 0
        }
    },
    mounted() {
        this.$el.style.zIndex = getMaxIndex()
        document.body.appendChild(this.$el)

        var map = new BMap.Map('choicemap', { enableMapClick: false })
        var point = new BMap.Point(this.lng, this.lat)
        map.centerAndZoom(point, 18)
        map.enableScrollWheelZoom()

        var marker = new BMap.Marker(point) // 创建标注
        map.addOverlay(marker) // 将标注添加到地图中
        var infoWindow = new BMap.InfoWindow(this.title) // 创建信息窗口对象
        marker.addEventListener('click', function () {
            map.openInfoWindow(infoWindow, point) //开启信息窗口
        })
    },
    methods: {
        hiddenView() {
            this.$emit('hidden')
        }
    },
    destroyed() {
        // remove DOM node after destroy
        if (this.$el && this.$el.parentNode) {
            this.$el.parentNode.removeChild(this.$el)
        }
    }
}
</script>
<style lang="scss" scoped>
.map-view {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #000;
}

.map-close {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 28px;
    color: #fff;
    cursor: pointer;
}

#choicemap {
    position: absolute;
    left: 100px;
    top: 100px;
    bottom: 100px;
    right: 100px;
    overflow: hidden;
}
</style>
